<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue双向绑定的实现</title>
</head>
<body>
<h2>vue双向绑定的实现</h2>
<p>核心： Object.defineProperty(obj,prop,{ get: funciton, set: function })</p>

<p>实现mvvm主要包含两个方面：数据变化更新视图，视图变化更新数据</p>
<ul>
  <li>Observer: 监听器；用来劫持并监听所有属性，如果有变动就通知订阅者</li>
  <li>Watcher：订阅者，可以收到属性的变化通知并执行相应的函数</li>
  <li>Compile：编译器，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的丁月琴</li>
</ul>
<div id="app">
  <h3 id="name">{{inputValue}}</h3>
  <input v-model="inputValue" type="text">
</div>
  <script src="./main.js"></script>
</body>
</html>